import React from 'react';
import './index.scss';
import avatar from '@/assets/images/avatar.png';
import { Menu, Dropdown } from 'antd';
import { loginOut as loginOutAction } from '@/store/user';
import { PoweroffOutlined } from '@ant-design/icons';
import { useDispatch, useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom'
import type { RootState } from '@/store';
import type { IUserInfo } from '@/api';

interface IAvatar {
  darkly: boolean;
}

const Avatar: React.FC<IAvatar> = (prop) => {
  const { darkly } = prop;
  const { staffName } = useSelector<RootState, IUserInfo>(state => state.user.userInfo)

  const History = useHistory();
  const dispatch = useDispatch();
  const loginOut = () => {
    dispatch(loginOutAction());
    History.replace('/login')
  }
  const menu = (
    <Menu>
      {/* <Menu.Item>
        <UserOutlined />个人中心
      </Menu.Item>
      <Menu.Item>
        <UnlockOutlined />修改密码
      </Menu.Item> */}
      {/* <Menu.Divider /> */}
      <Menu.Item onClick={loginOut}>
        <PoweroffOutlined />退出登录
      </Menu.Item>
    </Menu>
  )
  return (
    <Dropdown overlay={menu}>
      <div className={`hi-global-avatar ${darkly ? 'darkly' : ''}`}>
        <img
          width={24}
          height={24}
          src={avatar}
          alt="头像"
        />
        <span className="user-name">{staffName}</span>
      </div>
    </Dropdown>
  );
}

export default Avatar
